import React, { useEffect, useState } from 'react';
import { addTakeAwayBoardArea, updateTakeAwayBoardArea, getTakeAwayBoardAreaById } from '@/services/takeAwayBoardAreaService'
import {
  Form,
  message,
  Modal,
  Input,
  Button,
  InputNumber,
  Switch
}
  from 'antd';
import UploadImg from '@/components/UploadComponent';

interface Props {
  shopId: number,
  id?: number,
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
  initImgUrl: string;
}

const CreateModal: React.FC<Props> = (props) => {
  const { modalVisible, onSubmit, onCancel, id, shopId, initImgUrl } = props;
  const [form] = Form.useForm();
  const [imgUrl, setImgUrl] = useState<string>(initImgUrl);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [enabled, setEnabled] = useState<boolean>(true);

  const saveRecord = async () => {
    form.validateFields().then(async (values) => {
      console.log(values)
      const { StatusCode } = id ? await updateTakeAwayBoardArea({ ...form.getFieldsValue(), Id: id, ShopId: shopId }) : await addTakeAwayBoardArea({ ...form.getFieldsValue(), ShopId: shopId, Status: 1 });
      if ((id && StatusCode == 0) || (!id && StatusCode == 201)) {
        message.success("保存成功！");
        onSubmit?.();
        form.resetFields();
      }
    }).catch(err => console.log(err));
  }

  const getBoardType = async () => {
    if (!id) {
      return;
    }

    const { Items } = await getTakeAwayBoardAreaById(id, {});
    form.setFieldsValue(Items[0]);
    setIsLoading(true);
  }

  const imgChange = (value: string) => {
    setImgUrl(value);
    form.setFieldValue("ImgUrl", value);
  }

  useEffect(() => {
    if (!id) {
      setIsLoading(true);
      return;
    }

    setIsLoading(false);
    getBoardType();
  }, [id]);

  return (
    <Modal
      width={500}
      destroyOnClose
      title="新建"
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="submit" onClick={() => { form.submit(); }} type="primary">
          保存
        </Button>,
        <Button key="back" onClick={() => onCancel()}>
          取消
        </Button>,
      ]}
    >
      <Form
        name="basic"
        onFinish={saveRecord}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 700 }}
        form={form}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item label='区域名称' name='Name' rules={[{ required: true }]} ><Input type='string' /></Form.Item>
        <Form.Item
          label="区域图片"
          name="ImgUrl"
          rules={[{ required: true, message: '请选择图片!' }]}
        >
          {isLoading ? <UploadImg initialUrl={imgUrl} callBack={imgChange} /> : null}
        </Form.Item>
        {/* <Form.Item label='上架' name='Payment'   ><Switch checked={enabled} onChange={() => { setEnabled(!enabled) }} /></Form.Item> */}
        <Form.Item label='桌位数' name='BoardCount' rules={[{ required: true }]}  ><InputNumber disabled={!enabled} style={{ width: "339px" }} /></Form.Item>
        <Form.Item label='最低人数' name='MinPersonCount' rules={[{ required: true }]}  ><InputNumber disabled={!enabled} style={{ width: "339px" }} /></Form.Item>
        <Form.Item label='最高人数' name='MaxPersonCount' rules={[{ required: true }]}  ><InputNumber disabled={!enabled} style={{ width: "339px" }} /></Form.Item>
        <Form.Item label='简介' name='Description' rules={[{ required: true }]}  ><Input maxLength={20} placeholder='输入面积大小之类的' disabled={!enabled} style={{ width: "339px" }} /></Form.Item>
      </Form>
    </Modal>
  );
}

export default CreateModal;
